<!DOCTYPE html>
<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Tables </title>

    <!-- Bootstrap -->
    <link href=.../../statics/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href=.../../statics/css/font-awesome.min.css" rel="stylesheet">
	<!-- Bootstrap-table -->
    <link href=.../../statics/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
	
    <!-- Custom Theme Style -->
    <link href=.../../statics/css/custom.css" rel="stylesheet">
  </head>

  <body class="nav-md">
    <div class="container body">
      <div class="main_container">
        
        <!-- page content -->
        <div class="framebody" role="main">
          <div class="">
            <div class="page-title">
              <div class="title_left">
                <h3>BootstrapTable 表格示例</h3>
              </div> 
            </div>

            <div class="clearfix"></div> 
			
			<div class="row">
              <div class="col-md-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2><i class="fa fa-pencil fa-fw"></i>查询条件 <small></small></h2>
                    <ul class="nav navbar-right panel_toolbox">
                      <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                      </li> 
                      <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a>
                      </li>
                      <li><a class="close-link"><i class="fa fa-close"></i></a>
                      </li>
                    </ul>
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
 					<form id="demo-form1" class="form-horizontal form-label-left">
 					  <div class="form-group">
                        <label class="control-label col-md-1" for="dealerCode">经销商编号:
                        </label>
                        <div class="col-md-2">
                          <input type="text" id="dealerCode" class="form-control col-md-12">
                        </div>
                        <label class="control-label col-md-1" for="skuCode">商品编码:
                        </label>
                        <div class="col-md-2">
                          <input type="text" id="skuCode" class="form-control col-md-12">
                        </div>
                        <label class="control-label col-md-1" for="applyStatus">申请状态:
                        </label>
                        <div class="col-md-2">
                          <input type="text" id="applyStatus" class="form-control col-md-12">
                        </div>
                      </div>
                      <div class="form-group">
                        <label class="control-label col-md-1" for="dealerName">经销商名称:
                        </label>
                        <div class="col-md-2">
                          <input type="text" id="dealerName" class="form-control col-md-12">
                        </div>
                        <label class="control-label col-md-1" for="skuName">商品名称:
                        </label>
                        <div class="col-md-2">
                          <input type="text" id="skuName" class="form-control col-md-12">
                        </div>
                        <div class="pull-right">
                        	<a class="btn btn-success" id="btnClear"><i class="fa fa-trash-o fa-fw"></i>清空</a>
                        	<a class="btn btn-primary" id="btnQuery"><i class="fa fa-search-plus fa-fw"></i>查询</a>
                        </div>
                      </div>
 					</form>
                  </div>
                </div>
              </div>
            </div>
           
           	<div class="row">
              <div class="col-md-12 col-sm-12 col-xs-12">
                <div class="x_panel">
                  <div class="x_title">
                    <h2><i class="fa fa-reorder fa-fw"></i>申请列表 <small></small></h2> 
                    <div class="clearfix"></div>
                  </div>
                  <div class="x_content">
 					<div class="row">
 						<table id="myTable" class="table"></table>
 					</div>
                  </div>
                </div>
              </div>
            </div>
        </div>
        <!-- /page content --> 
      </div>
    </div>

    <!-- jQuery -->
    <script src=.../../statics/js/jquery.1.11.3.min.js"></script>
    <!-- Bootstrap -->
    <script src=.../../statics/js/bootstrap.min.js"></script>     
    <!-- Bootstrap-table -->
    <script src=.../../statics/plugins/bootstrap-table/bootstrap-table.js"></script>  
    <script src=.../../statics/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>  
    
    <!-- Custom Theme Scripts -->
    <script src=.../../statics/js/custom.js"></script>
	 
    <script>
    	$(function(){
    		//定义列
	    	var columns = [ 
				{ field: 'no', title: '序号', align: 'left', 
					formatter: function (value, row, index) {
						return index+1;
					}
				},
				{ field: 'taskName', title: '流程节点', align: 'center' },   
				{ field: 'auditUserName', title: '审批人', align: 'center' }, 
				{ field: 'auditTime', title: '审批时间', align: 'center' }, 
				{ field: 'auditResult', title: '审批结果', align: 'center',
				    formatter: function(value, row, index){  
				    	if (value == "0"){
				    		return "<span class='red'>驳回</span>";
				    	}else if (value == "1"){
				    		return "同意";
				    	}
				    } 
				}, 
				{ field: 'auditRemark', title: '审批意见', align: 'center' },
				{ field: 'candidates', title: '任务待办人', align: 'center' }
			];

			//定义查询回调函数（查询参数在此设置）
			var queryParams = function(params) { 
				var startDate = '';
				var endDate = '';
				return {
					rows: params.limit, //页面大小 
		  		 	page: params.pageNumber, //页码 
		  		 	startDate: startDate,
		  		 	endDate: endDate
			  	}; 
			};
			//url方式加载
			var url = ""; //请求json数据的服务器地址
			/* sys.initTable('myTable', {url: url, 
				queryParams:queryParams, 
				columns: columns,  
				striped: true,
				clickToSelect: true 
			}); */
			//data数组方式加载
			var data = [{
				no: '1',
				taskName: 'test',
				auditUserName: 'test',
				auditTime: 'test',
				auditResult: '1',
				auditRemark: 'test',
				candidates: ''
			}];
			sys.initTable('myTable', { 
				data: data, 
				columns: columns,  
				striped: true,
				clickToSelect: true 
			});
			
			$('#btnQuery').on('click', function(){
				sys.reloadTable('myTable');
			})
    	})
		
    </script>
  </body>
</html>